<template>
  <div class="goods-box">
    <!-- 输入框和按钮 -->
    <el-input
      v-model="input"
      placeholder="请输入内容"
      style="width: 480px; margin-left: 10px"
    >
      <template #append>
        <el-button :icon="Search" @click="initRequest" />
      </template>
    </el-input>
    <el-button type="primary">添加商品</el-button>
    <!-- 表格数据 -->
    <div class="tables">
      <el-table
        :data="tableData"
        border
        style="width: 98%; margin-top: 10px; margin-left: 10px"
      >
        <el-table-column
          v-for="(item, index) in options"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
        >
          <template #default v-if="item.prop === 'actions'">
            <!-- 编辑 -->
            <el-button type="primary" :icon="Edit" size="small">编辑</el-button>
            <!-- 删除 -->
            <el-button type="danger" :icon="Delete" size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <!-- <div class="pager"> -->
    <el-pagination
      v-model:currentPage="queryForm.pagenum"
      v-model:page-size="queryForm.pagesize"
      :page-sizes="[1, 2, 3, 6, 8]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- </div> -->
  </div>
</template>

<script lang="ts" setup>
import { ref, getCurrentInstance, reactive } from "vue";
import { Search, Delete, Edit, Setting } from "@element-plus/icons-vue";
const { $axios } = (getCurrentInstance() as any).appContext.config
  .globalProperties;
import axios from "axios";

const input = ref("");
const tableData = ref([]);
// 分页器 总的页数
const total = ref(0);
const queryForm = ref({
  query: "",
  pagenum: 1,
  pagesize: 10,
});
// http://106.12.150.223:8090/api/private/v1/goods?query=&pagenum=1&pagesize=10
const initRequest = async () => {
  await axios
    .get(
      `/api/goods?query=${input.value}&pagenum=${queryForm.value.pagenum}&pagesize=${queryForm.value.pagesize}`
      // {
      //   headers: {
      //     Authorization: localStorage.getItem("token"),
      //   },
      // }
    )
    .then((data: any) => {
      // console.log(data);
      tableData.value = data.data.data.goods;
      total.value = data.data.data.total;  // 总的页码
    });
};
initRequest();
// 分页器 每页显示的条数
const handleSizeChange = (pageSize: any) => {
  console.log(111);
  
  initRequest();
};
// 分页器 当前显示的页码
const handleCurrentChange = (pageNum: any) => {
  console.log(222);
  
  initRequest();
};

// 表格初始数据
const options = ref([
  {
    prop: "goods_id",
    label: "商品id",
  },
  {
    prop: "goods_name",
    label: "商品名称",
    width: 400,
  },
  {
    prop: "goods_price",
    label: "商品价格",
  },
  {
    prop: "goods_number",
    label: "商品数量",
  },
  {
    prop: "goods_weight",
    label: "商品重量",
  },
  {
    prop: "actions",
    label: "操作",
    width: 180,
  },
]);
</script>

<style lang="less" scoped></style>
